<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>轮播图</title>
    <style>
        .carousel{
            background: #2f4357;
            margin-top: 20px;
        }
        .carousel-inner img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="container-lg">
        <!-- id方便CSS或js定位 -->
        <!-- .carousel [ˌkærə'sel]轮播图基础类 -->
        <!-- .slide 让轮播图滑动切换-->
        <!-- data-interval="3000"用于设置轮播图切换的时间间隔，单位为毫秒。 -->
        <!-- data-ride="carousel": 这个属性告诉浏览器这个元素是一个轮播图组件，需要与轮播图相关的功能一起工作。 -->
        <div id="cid" class="carousel slide" data-interval="3000" data-ride="carousel">
          <!-- *******************************************指示器***************************************** -->
          <!-- .carousel-indicators用于创建轮播图的指示器列表。 -->
          <ol class="carousel-indicators">
            <!-- data-target="#cid"用于指定指示器对应的轮播图组件的ID。和上面div中的id对应 -->
            <!-- data-slide-to="0" 这些属性用于指定指示器切换到哪个轮播项。 -->
            <!-- .active 这个类表示当前显示的轮播项应该是第一个（索引为0）。当页面加载时，这个类将被自动添加。-->
            <li data-target="#cid" data-slide-to="0" class="active"></li>
            <li data-target="#cid" data-slide-to="1"></li>
            <li data-target="#cid" data-slide-to="2"></li>
            <li data-target="#cid" data-slide-to="3"></li>
            <li data-target="#cid" data-slide-to="4"></li>
            <li data-target="#cid" data-slide-to="5"></li>
            <li data-target="#cid" data-slide-to="6"></li>
          </ol>
             <!-- ***********************************************轮播图主体************************************************************** -->
             <!-- .carousel-inner轮播图主题容器 -->
             <div class="carousel-inner">
                <!-- 每个图片需要一个.carousel-item -->
                <!-- .active控制轮播图默认显示的图片，注意：如果没有这个类，轮播图会不显示 -->
                <!-- active放在第几章图片要和上面指示器的active对应，否则会显示错乱 -->
                <div class="carousel-item active">
                    <img src="../images/mi1.jpg" class="img-fluid">
                    <div class="carousel-caption d-none d-md-block"></div>
                </div>
                <div class="carousel-item">
                    <img src="../images/mi2.jpg" class="img-fluid">
                    <!-- .carousel-caption用于样式化轮播图中的标题和说明文本 -->
                    <!-- .d-none表示元素默认显示，当屏幕小于等于576px时，该元素将不显示 -->
                    <!-- .d-md-block当屏幕大于768px时，该元素显示为块级元素 -->
                    <div class="carousel-caption d-none d-md-block">
                        <h1>一级标题</h1>
                    </div>
                </div>
                <div class="carousel-item ">
                    <img src="../images/mi3.jpg" class="img-fluid">
                    <div class="carousel-caption d-none d-md-block"></div>
                </div>
                <div class="carousel-item">
                    <img src="../images/mi4.jpg" class="img-fluid">
                    <div class="carousel-caption d-none d-md-block"></div>
                </div>
                <div class="carousel-item">
                    <img src="../images/mi5.jpg" class="img-fluid">
                    <div class="carousel-caption d-none d-md-block"></div>
                </div>
                <div class="carousel-item">
                    <img src="../images/mi6.jpg" class="img-fluid">
                    <div class="carousel-caption d-none d-md-block"></div>
                </div>
                <div class="carousel-item">
                    <img src="../images/mi7.jpg" class="img-fluid">
                    <div class="carousel-caption d-none d-md-block"></div>
                </div>
             </div>
              <!-- ***********************************************轮播图控制按钮************************************************************** -->
              <!-- href属性指定的是轮播图主体的id -->
              <!-- carusel-control-prev创建一个向前滚动的按钮 -->
              <!-- data-slide="prev"指定轮播图的前一张图片 -->
              <a class="carousel-control-prev" href="#cid" data-slide="prev">
                <!-- 向前按钮的图标 -->
                <span class="carousel-control-prev-icon"></span>
              </a>
              <a class="carousel-control-next" href="#cid" data-slide="next">
                <span class="carousel-control-next-icon "></span>
              </a>

        </div>
    </div>
    
</body>
</html>